<script>
export default {
  name: "circularFields",
  props:{
    fieldsData:{
      type: Array,
      default: () => {
        return []
      }
    },
    disabled:{
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableData:{
      type: Array,
      default: () => {
        return [{}]
      }
    },
    filedName:Object,
    tableStatic:{
      type: Number,
      default: () => {
        return 1
      }
    },
  },
  data(){
    return{

    }
  },
  methods:{
    addRow(index) {
      this.tableData.push({})
    },
    delRow(index) {
      this.tableData.splice(index,1)
    },
  }
}
</script>

<template>
    <div class="clearfix filed-list">
      <el-table class="bg-gray no"
          :data="tableData"  empty-text=" "
          border
          style="width: 100%">
        <el-table-column v-for="(item,index) in fieldsData"
            :prop="item.value"
            :label="item.name"
            :width="item.width">
          <template #default="scope">
            <div v-if='item.value=="oper"'>
              <el-button class="fxl btn-num" type="primary" circle @click="addRow(scope.$index)" >+</el-button>
              <el-button class="fxl btn-num" v-if="scope.$index>0" type="danger" circle  @click="delRow(scope.$index)">-</el-button>
            </div>
            <div v-if="tableStatic==1">
              <el-radio-group :disabled="disabled" v-model="scope.row[item.value]" v-if="item.type=='radio'">
                <el-radio v-for="list in item.data" :label="list.value">{{ list.name }}</el-radio>
              </el-radio-group>
              <el-input :disabled="disabled"
                  v-if="item.type=='input'"
                  v-model="scope.row[item.value]"
              ></el-input>
              <el-input :disabled="disabled"
                  :rows="item.rows"
                  type="textarea"
                  v-if="item.type=='textarea'"
                  v-model="scope.row[item.value]"
              ></el-input>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<style scoped lang="less">
.filed-list{
  width:100%;
  p{
    display: flex;
    padding:5px 0px;
    span{
      width:100%;
      &.name{
        width:120px;
        padding:0px 10px 0px 0px;
        text-align: right;
      }
    }

  }
}
.btn-num{
  width:30px;
  height:30px;
  display: block;
  text-align: center;
  line-height:30px;
  padding:0px;
  font-size:22px;font-weight: bold;
}
</style>